import React, { useState, useEffect } from 'react';
import { Card, Form, Input, Button, message } from 'antd';
import { history } from 'umi';
import styles from './edit.less';
import { getSolutionById,updateSolution } from '../../../services/solutionService';

const { TextArea } = Input;

const SolutionEdit: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const fetchSolution = async (id: string) => {
    setLoading(true);
    try {
      const response = await getSolutionById(Number(id));
      console.log('获取编辑内容',response);
      if (response.code !== 200) {
        throw new Error('获取方案详情失败');
      }
      form.setFieldsValue(response.data);
    } catch (error) {
      message.error('获取方案详情失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
      const id = history.location.pathname.split('/')[2];
      console.log('编辑的id：',id);
      fetchSolution(id);
  }, []);

  const handleSubmit = async (values: any) => {
    setLoading(true);
    try {

      const id = history.location.pathname.split('/')[2];

      const response = await updateSolution(id, values);

      if (response.code === 200) {
        message.success('更新成功');
        history.push('/solutions');
      } else {
        throw new Error('更新失败');
      }
    } catch (error) {
      message.error('更新失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className={styles.container}>
      <Card
        title={'编辑方案'}
        extra={
          <Button onClick={() => history.push('/solutions')}>
            返回
          </Button>
        }
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
          initialValues={{
            solutionName: '',
            userGroup: '',
            description: '',
            content: '',
            documentationUrl: '',
          }}
        >
          <Form.Item
            name="solutionName"
            label="方案名称"
            rules={[{ required: true, message: '请输入方案名称' }]}
          >
            <Input size="large" placeholder="请输入方案名称" />
          </Form.Item>

          <Form.Item
            name="userGroup"
            label="用户组"
            rules={[{ required: true, message: '请输入用户组' }]}
          >
            <Input size="large" placeholder="请输入用户组" />
          </Form.Item>

          <Form.Item
            name="description"
            label="方案描述"
            rules={[{ required: true, message: '请输入方案描述' }]}
          >
            <TextArea rows={6} placeholder="请输入方案描述" />
          </Form.Item>

          <Form.Item
            name="content"
            label="详细内容"
            rules={[{ required: true, message: '请输入详细内容' }]}
          >
            <TextArea rows={10} placeholder="请输入详细内容" />
          </Form.Item>

          <Form.Item
            name="documentationUrl"
            label="参考文档连接"
          >
            <Input size="large" placeholder="请输入文档链接" />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" loading={loading}>
              保存
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default SolutionEdit; 